<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
    // 注意：setState更新数据状态是异步的，但也有同步的情况（17的版本中）
    //      setState可以调用多次，会集中一次更新。
    const root = ReactDOM.createRoot(document.querySelector('#root'))
    class App extends React.Component {
        state = {
            num: 0,
            userName: 'zhangsan'
        }
        changeNum() {
            // 1 - 
            // this.setState({
            //     num: this.state.num + 1
            // })
            // this.setState({
            //     userName: this.state.userName + '!'
            // })

            // 2 - 以下4行代码  只会让num加一次，因为setState是异步的，会在四条程序执行完之后执行num+1，每条程序的num初始值都是1
            // this.setState({
            //     num: this.state.num + 1 
            // })
            // this.setState({
            //     num: this.state.num + 1 
            // })
            // this.setState({
            //     num: this.state.num + 1 
            // })
            // this.setState({
            //     num: this.state.num + 1 
            // })

            // 3 - 将第一个参数设置为函数
        
            this.setState((prevState) => {
                console.log(prevState)
                return {
                    num: prevState.num + 1
                }
            })
            this.setState((prevState) => {
                console.log(prevState)
                return {
                    num: prevState.num + 1
                }
            })
            this.setState((prevState) => {
                console.log(prevState)
                return {
                    num: prevState.num + 1
                }
            })

        }
        render () {
            return (
                <>
                    <button onClick={this.changeNum.bind(this)}>{this.state.num}</button>
                    <p>{this.state.userName}</p>
                </>
            )
        }



    }



    root.render(<App/>)
</script>
</html>